<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>
<body>
<style>
    .cla{
        color: orange;
        font-size: 50px;
    }

</style>
<div id="app">

</div>
<script type="text/babel">
    /**
     * 1.它是JSX语法所以不用加引号
     * 2.和Vue一样，只允许有一个根标签
     * 3.内联样式style={{}} 第一个{}表示是js语句，第二个{}表示用对象的形式来表示
     * 4.class用className来表示
     * 5.事实上babel就是为了将js语法转换为jsx语法，实际上做的是const element = React.createElement(
     'h1',
     {className: 'greeting'},
     'Hello, world!'
     );  第一个参数表示的是标签名，第二个参数表示的是属性，第三个表示的是标签里要写的内容，如果要嵌套js的语法就不太好了
     * @type {JSX.Element}
     */
    const s = '我是span标签的内容'
    // const data = {name:'Angular',name:'React',name:'Vue'}
    const data = ['Angular','React','Vue']
    const myId = 'Hello'
     const vdom = (
         <div style={{backgroundColor:'red',fontSize:'20px'}}>
             <span>{s}</span>
             <h1 id={myId} className="cla">hello React</h1>
             <h2>前端框架列表</h2>
             <ul>
                 {
                     data.map((item,index)=>{
                         return <li key={index}>{item}</li>
                     })
                 }
             </ul>
         </div>

    )
     ReactDOM.render(vdom,document.getElementById('app'))


</script>
</body>

</html>
